<template>
	<div class="a">
		<div class="b">
			<div class="c">
				<img src="../../assets/img/images/user-logo-004.png">
				<div class="d">李嘉花同</div>
				<div class="e">积分 : 1000000</div>
				<div>
					<router-link :to="`/mobileLogin`">
						登录
					</router-link>
				</div>
				<div class="f">></div>
			</div>
		</div>
		<div>
			<hr>
		</div>
		<div class="m">
			<div class="n">
				<div class="j">
					<img src="../../assets/img/images/icon-pe-001.png" />
					<div>
						<router-link to="/mobile/orders">我的订单
						</router-link>
					</div>
				</div>
				<div class="k">
					<router-link to="/mobile/Shoppingcart">
						<img src="../../assets/img/images/icon-pe-002.png" />
						<div>我的购物车</div>
					</router-link>
				</div>
				<div class="l">
					<img src="../../assets/img/images/icon-pe-003.png" />
					<div>我的收藏</div>
				</div>
			</div>
		</div>
		<div>
			<hr>
		</div>
		<MobileHomeList proptitle="新书上市" :proplist='newslist'></MobileHomeList>
	</div>
</template>

<script>
	import MobileHomeList from '@/components/mobile/home/MobileHomeList.vue';
	export default {
		name: 'MobileUer',
		components: {
			MobileHomeList,
		},
		data() {
			return {
				newslist: [{
						id: 1,
						name: 'Java精彩编程200例',
						price: 88,
						pic: require('@/assets/img/mobile/movie3.png')
					},
					{
						id: 2,
						name: 'Java经典实例',
						price: 78,
						pic: require('@/assets/img/mobile/movie1.png')
					},
					{
						id: 3,
						name: 'Java从入门到项目实战',
						price: 109,
						pic: require('@/assets/img/mobile/movie2.png')
					}, {
						id: 4,
						name: '大中华寻宝系列2 北京寻宝记',
						price: 25.87,
						pic: require('@/assets/img/mobile/movie1.png')
					},
					{
						id: 5,
						name: '大中华寻宝系列5 山东寻宝记',
						price: 39.8,
						pic: require('@/assets/img/mobile/movie2.png')
					},
					{
						id: 6,
						name: '培养好习惯， 做最好的自己',
						price: 96,
						pic: require('@/assets/img/mobile/movie3.png')
					},
					{
						id: 7,
						name: '一园青菜成了精',
						price: 67,
						pic: require('@/assets/img/mobile/movie2.png')
					},
					{
						id: 8,
						name: '数学绘本 - 让谁先吃好呢',
						price: 29,
						pic: require('@/assets/img/mobile/movie3.png')
					},
					{
						id: 9,
						name: '1 少年读 漫画鬼谷子儿童版',
						price: 77,
						pic: require('@/assets/img/mobile/movie1.png')
					},
					{
						id: 10,
						name: ' 轻松实现全科启蒙',
						price: 60,
						pic: require('@/assets/img/mobile/movie1.png')
					},
					{
						id: 11,
						name: '漫画中小学生自我管理',
						price: 52,
						pic: require('@/assets/img/mobile/movie3.png')
					},
					{
						id: 12,
						name: '轻科普三合一优质绘本',
						price: 42,
						pic: require('@/assets/img/mobile/movie2.png')
					},
				],
			}
		}
	}
</script>

<style>
	.n div img {
		margin-top: 1.5rem;
		width: 3.5rem;
	}

	.j {
		margin-right: 3rem;
	}

	.k {
		margin-right: 3rem;
	}

	.n {
		display: flex;
		justify-content: center;
	}

	.m {
		margin-top: -0.3rem;
		width: 100%;
		height: 8rem;
		background-color: #fffae8;
	}

	.a {
		margin-top: 50px;
		width: 100%;
		height: 56rem;
		background-color: #343434;
	}

	.b {
		width: 100%;
		height: 8rem;
		/* background-color: white; */
	}

	.f {
		color: white;
		margin-top: 3.5rem;
		margin-left: 8rem;
	}

	.d {
		color: white;
		margin-left: 1.5rem;
		margin-top: 2.8rem;
	}

	.e {
		color: white;
		margin-top: 4.3rem;
		margin-left: -5rem;
	}

	.c {
		display: flex;
		width: 100%;
		height: 10rem;
	}

	.c img {
		margin-left: 2rem;
		margin-top: 1.5rem;
		width: 5rem;
		height: 5rem;
		border-radius: 50%;
	}
</style>
